<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  background: #fff;
			  padding: 0;
			  overflow: hidden;
				height: 500px;
			  margin: 0;
			}
			
			.container {
			  width: 900px;
			  position: relative;
			  height: 400px;
			  overflow: hidden;
			  margin: 0 auto;
			}
			
			/* Clouds */
			#clouds {
			  top: 100px;
			  position: relative;
			  -webkit-animation: move 20s infinite linear;  
			  -moz-animation: move 20s infinite linear;  
			  -ms-animation: move 20s infinite linear;
			  z-index: 1;
			}
			
			#clouds2 {
			  position: relative;
			  -webkit-animation: backup 14s infinite linear;
			  -moz-animation: backup 14s infinite linear;
			  -ms-animation: backup 14s infinite linear;
			  z-index: 2;
			}
			
			.cloud1, .cloud2, .cloud3 { 
			  opacity: 1;  
			}
			
			.cloud1 {
			  width: 200px;
			  height: 60px;
			  background: #00c9ee;
			  position: absolute;
			  top: 80px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			  
			}
			
			.cloud1:after {
			  content: '';
			  position: absolute;
			  background: #00c9ee;
			  width: 80px;
			  height: 80px;
			  top: -40px;
			  left: 20px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			
			}
			
			.cloud1:before {
			  content: '';
			  position: absolute;
			  background: #00c9ee;
			  width: 100px;
			  height: 100px;
			  top: -60px;
			  right: 30px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			}
			
			.cloud2 {
			  width: 100px;
			  height: 30px;
			  background: #00c9ee;
			  position: absolute;
			  top: 180px;
			  left: 400px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			}
			
			.cloud2:after {
			  content: '';
			  position: absolute;
			  background: #00c9ee;
			  width: 40px;
			  height: 40px;
			  top: -20px;
			  left: 10px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			}
			
			.cloud2:before {
			  content: '';
			  position: absolute;
			  background: #00c9ee;
			  width: 50px;
			  height: 50px;
			  top: -30px;
			  right: 15px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			
			}
			
			.cloud3 {
			  width: 200px;
			  height: 60px;
			  background: #00c9ee;
			  position: absolute;
			  top: 100px;
			  left: 740px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			}
			
			.cloud3:after {
			  content: '';
			  position: absolute;
			  background: #00c9ee;
			  width: 80px;
			  height: 80px;
			  top: -40px;
			  left: 20px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			}
			
			.cloud3:before {
			  content: '';
			  position: absolute;
			  background: #00c9ee;
			  width: 100px;
			  height: 100px;
			  top: -60px;
			  right: 30px;
			  
			  -webkit-border-radius: 200px;
			  -moz-border-radius: 200px;
			  border-radius: 200px;
			}
			
			@-webkit-keyframes move {
			  0% {left: 0px;}
			  49% {left: 940px; opacity: 1;}
			  50% {left: 940px; opacity: 0;}
			  51% {left: -940px; opacity: 0;} 
			  52% {left: -940px; opacity: 1;} 
			  100% {left: 0px;} 
			}
			
			@-webkit-keyframes backup {
			  0% {left: -940px;}
			  100% {left: 940px;}  
			
			}  
			
			@-moz-keyframes move {
			  0% {left: 0px;}
			  49% {left: 940px; opacity: 1;}
			  50% {left: 940px; opacity: 0;}
			  51% {left: -940px; opacity: 0;} 
			  52% {left: -940px; opacity: 1;} 
			  100% {left: 0px;} 
			}
			
			@-moz-keyframes backup {
			  0% {left: -940px;}
			  100% {left: 940px;}  
			
			}  
			
			@-ms-keyframes move {
			  0% {left: 0px;}
			  49% {left: 940px; opacity: 1;}
			  50% {left: 940px; opacity: 0;}
			  51% {left: -940px; opacity: 0;} 
			  52% {left: -940px; opacity: 1;} 
			  100% {left: 0px;} 
			}
			
			@-ms-keyframes backup {
			  0% {left: -940px;}
			  100% {left: 940px;}  
			
			} 
			
			#clouds .cloud1, #clouds .cloud2, #clouds .cloud2:after, #clouds .cloud2:before, #clouds .cloud3, #clouds .cloud1:after, #clouds .cloud1:before, #clouds .cloud3:before, #clouds .cloud3:after {
				background: #00f1ee;
				box-shadow: 0px 0px 20px 5px #00f1ee;	
				-moz-box-shadow: 0px 0px 20px 5px #00f1ee;	
				-webkit-box-shadow: 0px 0px 20px 5px #00f1ee;
			}
		</style>
	</head>
	<body>
		<div class="container">
		  <div id="clouds">
		    <div class="cloud1">是xcc</div>
		    <div class="cloud2">2</div>
		    <div class="cloud3">2</div>
		  </div>
		  <div id="clouds2">
		    <div class="cloud1">对的</div>
		    <div class="cloud2">2</div>
		    <div class="cloud3">2</div>
		  </div>
		
		</div>
	</body>
</html>
